<template>
  <div class="main">
    <header-bar title="系统设置">
    </header-bar>
    <div class="content">
      <group label-align="left">
        <cell is-link title="账号安全"></cell>
        <cell title="新消息提醒"></cell>
        <x-switch title="听筒模式" v-model="earphoneMode">
        </x-switch>
        <cell-box is-link>清除本地聊天记录</cell-box>
        <cell title="聊天字体大小" class="fontClass">标准</cell>
      </group>
      <group>
        <cell-box is-link>关于</cell-box>
      </group>
    </div>
    <div class="logout">
      <x-button type="default" action-type="button" class="btn_logout" @click.native="logout">
        退出登录
      </x-button>
    </div>

  </div>
</template>

<script>
import {
  removeToken
} from '@/utils/auth'
import {
  Group,
  CellBox,
  Cell,
  XSwitch,
  XButton
} from 'vux'
import HeaderBar from '@/components/HeaderBar'

export default {
  data() {
    return {
      earphoneMode: false
    }
  },
  components: {
    Group,
    Cell,
    CellBox,
    XButton,
    XSwitch,
    HeaderBar
  },
  methods: {
    logout() {
      removeToken()
      this.$router.push({
        name: 'login'
      })
    }
  }
}
</script>

<style scoped lang="less">
.main {
    width: 100%;
    font-size: 0.36rem;
    text-align: center;
    color: #333333;
    header {
        height: 1rem;
        line-height: 1rem;
        background-color: #f87015;
        color: #ffffff;
        text-align: center;
    }

    .content {
        font-size: 0.32rem;
    }

    .fontClass {
        text-align: left;
    }

    .logout {
        width: 100%;
    }

    .btn_logout {
        width: 7rem;
        font-size: 0.36rem;
        color: #ffffff;
        background-color: #f87015;
        border-radius: 0.08rem;
        padding: 0.1rem 2.76rem;
        margin: 2rem auto 0;
    }

}
</style>
